<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>广告管理</title>
    <link
      rel="stylesheet"
      href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"
    />
    <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/advertising.css" />
    <link rel="stylesheet" href="../../src/font/font-index/iconfont.css">
    <script src="../../src/font/font-index/iconfont.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <div id="optionBox">
            <button
              class="btn btn-default"
              id="append"
              data-toggle="modal"
              data-target="#appendDiv"
            >
              + 新增广告
            </button>
            </button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <table id="table" class="table table-hover">
            <thead>
              <tr>
                <td>
                  <input type="checkbox" id="inlineCheckbox1" value="option1" />
                  ID
                </td>
                <td>广告图</td>
                <td>跳转</td>
                <td>展示端</td>
                <td>展示位</td>
                
                <td>操作</td>
              </tr>
            </thead>

            <tbody id="tableBox">
              <!-- 数据渲染在这 -->
            </tbody>
          </table>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div id="pageBox">
            <span>共<span id="totPage">5</span><span>页</span></span>
            <select id="selectShowPageNum" class="form-control">
              <option value="0">10条/页</option>
              <option value="1">20条/页</option>
              <option value="2">50条/页</option>
            </select>
            <span id="prePage" class="glyphicon glyphicon-chevron-left"></span>
            <span id="pageDiv">
              <!-- 页码渲染在这里 -->
            </span>
            <span
              id="nextPage"
              class="glyphicon glyphicon-chevron-right"
            ></span>
            <span
              >前往
              <input type="text" id="goPageNum" class="form-control" /><span>
                页</span
              ></span
            >
            <span id="goPage">跳转</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 增加模态框 -->
    <div class="modal fade" id="appendDiv" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="exampleModalLabel">新增广告</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-id" class="control-label">ID</label>
                <input type="text" class="form-control" id="id" />
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label"
                  >广告图</label
                >
                <input type="text" class="form-control" id="name" />
              </div>
              <div class="form-group">
                <label class="control-label">展示端</label>
                <div>
                  <label>
                    <input
                      type="radio"
                      name="sex"
                      id="optionsRadios1"
                      value="0"
                    />
                    pc端
                  </label>
                  <label>
                    <input
                      type="radio"
                      name="sex"
                      id="optionsRadios2"
                      value="1"
                    />
                    手机端
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">展示位置</label>
                <select id="zhiwei" class="form-control">
                  <option value="0">类型</option>
                  <option value="管理员">管理员</option>
                  <option value="主治医生">主治医生</option>
                  <option value="医生">医生</option>
                  <option value="药师">药师</option>
                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button type="button" id="save" class="btn btn-primary">
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除模态框 -->
    <div class="modal fade" id="delDiv" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            确认删除后，人员将被彻底删除，是否确认删除？
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button type="button" id="del" class="btn btn-primary">删除</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改模态框 -->
    <div class="modal fade" id="xiugaiDiv" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="exampleModalLabel">编辑广告</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-id" class="control-label">ID</label>
                <input type="text" class="form-control" id="id" />
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label"
                  >跳转链接</label
                >
                <input type="text" class="form-control" id="name" />
              </div>
              <div class="form-group">
                <label class="control-label">展示端</label>
                <div>
                  <label>
                    <input
                      type="radio"
                      id="male"
                      name="sex"
                      id="optionsRadios1"
                      value="0"
                    />
                    pc端
                  </label>
                  <label>
                    <input
                      type="radio"
                      id="female"
                      name="sex"
                      id="optionsRadios2"
                      value="1"
                    />
                    手机端
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">展示位置</label>
                <select id="zhiwei" class="form-control">
                  <option value="0">类型</option>
                  <option value="管理员">首页顶部</option>
                  <option value="主治医生">首页底部</option>
                  <option value="医生">首页左部</option>
                  <option value="药师">首页右部</option>
                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button type="button" id="xiugai" class="btn btn-primary">
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <script>
      // 模拟数据函数
      //随机网址
      function randomString(length, chars) {
      let result = '';
      for (let i = length; i > 0; --i) 
      {
        result += chars[Math.floor(Math.random() * chars.length)]
      };
      return result=`https://www.${result}/`;
      }
      //生成单个对象数据
      function obj(num){
        const obj={}
        obj.id=num
        obj.icon="iconfont icon-tupiantianchong"
        obj.link=randomString(16, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')
        obj.showClient=   Math.floor(Math.random()*2) 
        obj.showPos="首页顶部"
        return obj
      }
      function dataSc(num,data){
        for(let i=1;i<num+1;i++){
          data.push(obj(i)) 
        }
        return data
      }
      data=[]
      data=dataSc(50,data)
      // 模拟数据
      
      let arr = data
      console.log(arr)

      // 初始化
      let showArr = []
      let presentPage = 1
      let presentData = []
      let maxPage
      let showPageNum = 10
      let delId
      resetPage()

      // 渲染表格数据
      function show(data) {
        $("#tableBox").html("")
        for (let i = 0; i < data.length; i++) {
          $("#tableBox").append(`
        <tr>
          <td><input type="checkbox" id="inlineCheckbox1" value="option1"> ${
            data[i].id
          }</td>  
          <td><span class='${data[i].icon}'></span></td>
          <td>${data[i].link}</td>  
          <td>${data[i].showClient == 0 ? "pc端" : "手机端"}</td>  
          <td>${data[i].showPos}</td>  
          <td>
             <a data-toggle="modal" data-target="#xiugaiDiv"
                  data-whatever="@mdo" id = 'xgbtn' onclick = 'xiugaiDefault(${JSON.stringify(
                    data[i]
                  )})'>编辑</a>
            <a data-toggle="modal" data-target="#delDiv"
                  data-whatever="@mdo" id = 'delbtn' onclick = 'getDelId(${
                    data[i].id
                  })'>删除</a>
                 
          </td>  
      </tr>`)
        }
      }

      // 切割并为show提供数据
      function showData(data, pageNum) {
        let qishi = (pageNum - 1) * showPageNum
        presentData = data.slice(qishi, qishi + showPageNum)
        show(presentData)
        $("#pageDiv .btn-default")
          .eq(pageNum - 1)
          .addClass("active")
          .siblings()
          .removeClass("active")
        presentPage = pageNum
      }

      // 渲染页码
      function showPage(data) {
        maxPage = Math.ceil(data.length / showPageNum)
        $("#pageDiv").html("")
        for (let i = 1; i <= maxPage; i++) {
          $("#pageDiv").append(`<span class="btn btn-default">${i}</span>`)
        }

        // 重置按钮
        $("#reset").click(function () {
          resetPage()
        })
      }
      // 初始和重置页面功能,以及清空按钮
      function resetPage() {
        $("#searchName").val("")
        $("#searchGender").val("null")
        $("#searchType").val("0")
        showArr = [...arr]
        showPage(showArr)
        showData(showArr, 1)
      }

      // 跳转
      $("#pageDiv").on("click", ".btn-default", function () {
        showData(showArr, parseInt($(this).text()))
      })

      // 上一页
      $("#prePage").click(function () {
        if (presentPage > 1) {
          let shangyiye = presentPage - 1
          showData(showArr, shangyiye)
        }
      })

      // 下一页
      $("#nextPage").click(function () {
        if (presentPage < maxPage) {
          let xiayiye = presentPage + 1
          showData(showArr, xiayiye)
        }
      })
      
      // ================================新增人员================================
      $("#save").on("click", function () {
        let peopleObj = {
          id: $("#appendDiv").find(".modal-body #id").val(),
          link: $("#appendDiv").find(".modal-body #name").val(),
          showClient: $("#appendDiv").find("input[name=sex]:checked").val(),
          showPos: $("#appendDiv").find("#type option:selected").val(),
          contact: $("#appendDiv").find(".modal-body #phone").val(),
          creTime: presentTime,
          switch: 1,
          dept: $("#appendDiv").find("#dept option:selected").val(),
        }

        // 重新渲染
        arr.push(peopleObj)
        showArr.push(peopleObj)
        showPage(showArr)
        showData(showArr, maxPage)

        // 隐藏添加模态框
        $("#appendDiv").modal("hide")
      })

      // ================================删除人员================================
      function getDelId(id) {
        delId = id
      }

      $("#del").click(function () {
        console.log(123)
        for (let i = 0; i < showArr.length; i++) {
          if (showArr[i].id == delId) {
            showArr.splice(i, 1)
          }
        }
        $("#delDiv").modal("hide")
        showPage(showArr)
        showData(showArr, 1)
      })

      // ================================修改人员================================
      function xiugaiDefault(stuObj) {
        $("#xiugaiDiv")
          .find(".modal-body #id")
          .val("" + stuObj.id + "")
        $("#xiugaiDiv")
          .find(".modal-body #name")
          .val("" + stuObj.link + "")
        stuObj.showClient == 0
          ? $("#male").prop("checked", true)
          : $("#female").prop("checked", true)
        $("#xiugaiDiv")
          .find(".modal-body #zhiwei")
          .val("" + stuObj.zhiwei + "")
        $("#xiugaiDiv")
          .find(".modal-body #phone")
          .val("" + stuObj.contact + "")
        $("#xiugaiDiv")
          .find(".modal-body #dept")
          .val("" + stuObj.dept + "")
      }

      $("#xiugai").click(function () {
        let stuObj = {
          id: $("#xiugaiDiv").find(".modal-body #id").val(),
          link: $("#xiugaiDiv").find(".modal-body #name").val(),
          icon: "glyphicon glyphicon-user",
          showClient: $("#xiugaiDiv").find("input[name=sex]:checked").val(),
          showPos: $("#xiugaiDiv").find("#zhiwei option:selected").val(),
          contact: $("#xiugaiDiv").find(".modal-body #phone").val(),
          dept: $("#xiugaiDiv").find("#dept option:selected").val(),
          switch: 1,
          creTime: presentTime,
        }

        for (let i = 0; i < showArr.length; i++) {
          if (stuObj.id == showArr[i].id) {
            showArr[i] = stuObj
          }
        }

        // 隐藏修改模态框
        $("#xiugaiDiv").modal("hide")
        showPage(showArr)
        showData(showArr, 1)
      })

      // =============================改变显示的人数=============================
      $("#selectShowPageNum").click(function () {
        let selectshowPageNum = $("#selectShowPageNum").val()

        if (selectshowPageNum == 0) {
          showPageNum = 10
        } else if (selectshowPageNum == 1) {
          showPageNum = 20
        } else if (selectshowPageNum == 2) {
          showPageNum = 50
        }
        $("#totPage").text(maxPage)
        showPage(showArr)
        showData(showArr, 1)
      })

      // ==================================跳转==================================
      $("#goPage").click(function () {
        var reg = /^\d{1,}$/
        if (reg.test($("#goPageNum").val())) {
          if ($("#goPageNum").val() <= maxPage) {
            showPage(showArr)
            showData(showArr, $("#goPageNum").val())
          }
        }
      })
    </script>
  </body>
</html>
